import React, { useState, useEffect } from "react";
import { Arrow, UserCircleO, Search, HomeO } from "@react-vant/icons";
import { Swiper, Image ,ProductCard} from "react-vant";
import styles from "./home.module.scss";
import http from "../../http";
import { useNavigate } from "react-router-dom";
import Header from '../../components/Header/Header'
export default function Home() {
  // 健康咨询请求列表查询类型
  interface InfoListParamsRawState {
    plateId?: number;
    id: number;
    name: string;
    sort: number;
  }
  //问诊咨询
  interface Diseasetypes {
    departmentName: string;
    id: number;
    pic: string;
    rank: number;
  }
  //  首页tab切换下面的数据
  interface abb {
    id: number;
    plateId: number;
    releaseTime: number;
    source: string;
    thumbnail: string;
    title: string;
  }
  interface In {
    plateId: number;
    count?: number;
    page?: number;
  }
  //轮播
  const [swipers, setSwiper] = useState<any[]>([]);
  const [parma, setparma] = useState({
    plateId: 1,
    count: 5,
    page: 1,
  });
  const getSwiper = async () => {
    const res: any = await http.get("/health/share/v1/bannersShow");
    setSwiper(res.result);
  };
  //问诊咨询
  const [bing, setBing] = useState<Diseasetypes[]>([]);

  const getBing = async () => {
    const res: any = await http.get(
      "/health/share/knowledgeBase/v1/findDepartment"
    );
    setBing(res.result);
  };
  //健康咨询标题接口
  const [listtitle, setListTitle] = useState<InfoListParamsRawState[]>([]);

  const titlelists = async () => {
    const res: any = await http.get(
      "/health/share/information/v1/findInformationPlateList"
    );
    console.log(res, "uishjcbj");
    setListTitle(res.result);
  };
  //健康咨询列表接口
  const [letlist, setLetList] = useState<abb[]>([]);
  const [healthID, sethealthID] = useState<number>(1);
  const clickTab = (id: number) => {
    sethealthID(id);
    console.log(healthID);
    setparma({
      plateId: id,
      page: 1,
      count: 5,
    });
  };

  const clickMore = async (params: In) => {
    const res: any = await http.get(
      "/health/share/information/v1/findInformationList",
      { params: { plateId: healthID, page: (parma.page += 1), count: 5 } }
    );
    console.log(res.result, "dihcuihuicd");
    setLetList([...letlist, ...res.result]);
  };
  useEffect(() => {
    titlelists();
    getSwiper();
    getBing();
  }, []);

  useEffect(() => {
    http
      .get("/health/share/information/v1/findInformationList", {
        params: parma,
      })
      .then((res: any) => {
        console.log(res, "djiwi");
        setLetList(res.result);
      });

    clickTab(healthID);
  }, [healthID]);
  const navigate = useNavigate();
  return (
    <div className={styles.homeHeader}>
      {/* 搜索 */}
       <Header></Header>
      {/* 轮播图 */}
      <div className={styles.demo_swiper}>
        <Swiper className={styles.swiper}>
          {swipers.map((item, ind) => (
            <Swiper.Item key={ind}>
              <Image lazyload src={item.imageUrl} />
            </Swiper.Item>
          ))}
        </Swiper>
      </div>
      {/* 知识宝典 */}
      <div className={styles.zhishi}>
        <span>知识宝典</span>
      </div>
      {/* 常见病症/常见药品 */}
      <div className={styles.baodian}>
        <div className={styles.bingli}>
          <div className={styles.binglis}>
            <span>常见病症</span>
          </div>
          <img
            src="https://wuyueshiliuhao.oss-cn-shanghai.aliyuncs.com/%E5%B8%B8%E8%A7%81%E7%97%85%E7%97%87.png"
            alt=""
          />
        </div>
        <div className={styles.yaopin}>
          <div className={styles.yaopins}>
            <span>常用药品</span>
          </div>
          <img
            src="https://wuyueshiliuhao.oss-cn-shanghai.aliyuncs.com/%E5%B8%B8%E7%94%A8%E8%8D%AF%E5%93%81.png"
            alt=""
          />
        </div>
      </div>
      {/* 问诊咨询 */}
      <div className={styles.zixun}>
        <span>问诊咨询</span>
      </div>
      {/* 问诊咨询 */}
      <div className={styles.home_list}>
        {bing.map((v, i) => {
          return (
            <div key={i} className={styles.home_lists}>
              <img src={v.pic} alt="" />
              <span>{v.departmentName}</span>
            </div>
          );
        })}
      </div>
      {/* 健康评测 */}
      <div className={styles.jiankang}>
        <span>健康评测</span>
      </div>
      {/* 健康评测图片 */}
      <div className={styles.pingce}>
        <img
          src="
         https://wuyueshiliuhao.oss-cn-shanghai.aliyuncs.com/%E5%81%A5%E5%BA%B7%E8%AF%84%E6%B5%8B.png"
          alt=""
          onClick={()=>navigate('/doctorList')}
        />
      </div>
      {/* 健康咨询 */}
      <div className={styles.zi_xun}>
        <span>健康咨询</span>
      </div>
      {/* 健康要闻 */}
      <div className={styles.yaowen}>
        <div style={{ display: "flex", justifyContent: "space-around" }}>
          {listtitle.map((item, ind) => (
            <div
              key={ind}
              onClick={() => clickTab(item.id)}
              style={{ margin: "0 10px" }}
            >
              {item.name}
            </div>
          ))}
        </div>
      </div>
      <div>
        {letlist.map((item, ind) => {
          return (
            <ProductCard
              key={item.id}
              desc={item.title}
              thumb={item.thumbnail}
              title={item.source}
              onClick={() => {
                navigate(`/seek/${item.id}`);
              }}
            />
          );
        })}
      </div>
      {/* 查看更多 */}
      <div className={styles.chakan}>
        <p onClick={() => clickMore(parma)}>查看更多</p>
      </div>
    </div>
  );
}